<template>
    <div id="Ask">
        <div class="jx-content part1">
            <el-form :inline="true" class="demo-form-inline clearfix" :model="form">
                <el-form-item label="班级信息 :">
                    <el-cascader class="cascader" :options="data" expand-trigger="hover" :props="cascaderconfig" change-on-select v-model="selectedOptions"></el-cascader>
                </el-form-item>
                <el-form-item label="学生信息 :" prop="info">
                    <el-input type="text" v-model="form.info" style="width: 50%;" placeholder="请输入学生信息" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="button-style" @click="search">搜 索</div>
                </el-form-item>
                <el-form-item class="fr">
                    <a class="button-style" @click="downLoads">下 载</a>
                </el-form-item>
            </el-form>
            <div class="tips"> 注：此列表按照默认班级检索</div>
            <div class="table">
                <el-table :data="tableDatas" style="width: 100%">
                    <el-table-column type="index" label="序号" width="100">
                        <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column prop="username" label="姓名"></el-table-column>
                    <el-table-column prop="userNumber" label="学号"></el-table-column>
                    <el-table-column prop="className" label="班级"></el-table-column>
                    <el-table-column prop="grade" label="年级"> </el-table-column>
                    <el-table-column prop="saqPerformance" label="简答题"></el-table-column>
                    <el-table-column prop="judgementPerformance" label="判断题"></el-table-column>
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      //三级配置初始化
      cascaderconfig: {
        value: "name",
        label: "name"
      },
      //获取班级所有id集合
      idlist: [],
      //班级id
      courseId: "",
      tableDatas: [],
      selectedOptions: [],
      data: [],
        currentPage: 1,
        pagesize: 10,
        totalCount: 1000,
      form: {
        //信息
        info: "",
        //年份
        chooseYear: "",
        optionsYear: [],
        //班级
        chooseClass: "",
        optionsclass: [],
        //状态
        choosestatus: "",
        optionstatus: []
      }
    };
  },
  created() {
    this.courseId = this.$localstorage.getLocalStorage("setCourseId");
    this.ClassList();
  },
  methods: {
    //三级联动
    ClassList() {
      let self = this;
      self.$http.get("/tes/course/" + self.courseId + "/search/list-class?allFlag=true&defaultClassFlag=true").then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.data = res.data;
            self.filterInitData(res.data);
            self.ChangeList();
          } else {
            self.$message.error(res.message);
          }
        });
    },
    //过滤数据获得默认值
    filterInitData(data) {
		let self = this;
		data.forEach(function(item) {
			if (item.defaultedClass == true) {
			    self.selectedOptions.push(item.name);
			}
			if (item.children) {
			item.children.forEach(function(it) {
				if (it.defaultedClass == true) {
				    self.selectedOptions.push(it.name);
				}
				if (it.children) {
				it.children.forEach(function(itChild) {
					if (itChild.defaultedClass == true) {
				        self.selectedOptions.push(itChild.name);
					}
				});
				}
			});
		}
    });
     // console.log(self.selectedOptions, 99)
      return self.selectedOptions;
    },
    //获取id集合
    ChangeList() {
		let self = this;
		if (
			self.selectedOptions[0] === undefined ||
			self.selectedOptions[0] == "全部"
		) {
			self.selectedOptions[0] = "";
			self.selectedOptions[1] = "";
			self.selectedOptions[2] = "";
		} else if (
			self.selectedOptions[1] === undefined ||
			self.selectedOptions[1] == "全部"
		) {
			self.selectedOptions[1] = "";
			self.selectedOptions[2] = "";
		} else if (
			self.selectedOptions[2] === undefined ||
			self.selectedOptions[2] == "全部"
		) {
			self.selectedOptions[2] = "";
		}
		self.$http.post("/tes/course/" + self.courseId + "/search/class", {
			status: self.selectedOptions[0],
			grade: self.selectedOptions[1],
			name: self.selectedOptions[2]
			})
		.then(response => {
		let res = response.data;
		if (res.code == "200") {
			self.idlist = res.data;
			//成功后的回调
			self.getInit();
		} else if (res.code == "404") {
			self.$message(res.message);
		} else {
			self.$message.error(res.message);
		}
		})
		.catch(err => {
	        console.log(err);
		});
    },
    //初始化获取列表
    getInit() {
		let self = this;
		self.$http.post( "/tes/quiz/statistics/" +self.courseId +"?pageNum=" + self.currentPage + "&pageSize=" + self.pagesize,{
			userInfo: self.form.info,
			classIdList: self.idlist
		}).then(response => {
		let res = response.data;
		if (res.code == "200") {
			self.tableDatas = res.data.content;
			self.totalCount = res.data.total;
		} else {
			self.$message.error(res.message);
		}
		})
		.catch(err => {
		    console.log(err);
		});
    },

    //搜索
    search() {
		this.currentPage = 1
		this.ChangeList();
    },
    //分页
    handleSizeChange: function(size) {
     	this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
		this.currentPage = currentPage;
		this.ChangeList();
    },
    //下载
    downLoads() {
		let self = this;
		let flag=''
		if(self.selectedOptions[0]=='未结课'){
			flag = false
		}else if(self.selectedOptions[0]=='已结课'){
			flag = true
		}
		self.ChangeList();
		self.$http.post('/tes/quiz/statistics/'+self.courseId+'/download', {
			userInfo: self.form.info,
			classIdList: self.idlist,
			status:flag
		},{ responseType: "blob" }).then(response => {
		let contentType = response.headers["content-type"];
		//console.log(contentType);
		//console.log(response.headers["code-message"]);
		if (contentType == "application/json;charset=UTF-8") {
			self.$message.error(response.headers["code-message"]);
		} else {
			let blob = new Blob([response.data], {
			type: response.headers["content-disposition"]
			});
			let fileName = self.selectedOptions[2]+'随堂提问统计.xls';
			let url = window.URL.createObjectURL(blob);
			let downloadElement = document.createElement("a");
			downloadElement.style.display = "none";
			downloadElement.href = url;
			downloadElement.download = fileName; //下载后文件名
			document.body.appendChild(downloadElement);
			downloadElement.click(); //点击下载
			document.body.removeChild(downloadElement); //下载完成移除元素
			window.URL.revokeObjectURL(url);
		}
		})
		.catch(err => {
		    console.log(err);
		});
    }
  }
};
</script>
<style scoped>
.table >>> tr:hover > td {
  background-color: #ffff !important;
}
.el-select >>> .el-input__icon {
  line-height: 32px;
}
.el-input-number >>> .el-input__inner {
  height: 40px;
  padding-right: 35px;
  padding-left: 0;
}
.el-table__row .el-input-number >>> .el-input__inner {
  border: none;
}
.el-table__row .el-input-number >>> .el-input-number__decrease,
.el-table__row .el-input-number >>> .el-input-number__increase {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  border: 1px solid #dcdfe6;
  top: 10px;
}
.el-table__row .el-input-number >>> .el-input-number__decrease {
  left: 80px;
}
.el-table__row .el-input-number >>> .el-input-number__increase {
  right: 90px;
}
.el-table__row .el-input-number >>> [class*=" el-icon-"],
.el-table__row .el-input-number >>> [class^="el-icon-"] {
  position: absolute;
  left: 2px;
  top: 2px;
}
.cascader{
  margin-top: -4px
}
</style>
<style scoped>
.el-input-number.is-controls-right >>> .el-input-number__increase {
  line-height: 16px;
}
.el-input-number {
  position: relative;
  display: inline-block;
  line-height: 38px;
  overflow: hidden;
  width: auto;
}
.el-input-number >>> .el-input-number__increase {
  top: 4px;
}
.el-input-number.is-controls-right >>> .el-input-number__decrease {
  bottom: 4px;
}
.el-input-number >>> .el-input .el-input__inner {
  width: 100px;
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
#Ask {
  width: $width;
  margin: 0px auto;
  color: #727272;
  .part1 {
    margin: 0px;
    .el-form-item {
      margin-bottom: 0px;
    }
    .tips {
      margin-top: 15px;
      color: #1277eb;
    }
  }
  .table {
    margin: 20px 0;
  }
}
</style>